<template>
  <div class="mustrob">
    <div class="mustrob-container">
      <div class="mustrob-containe-top">
        <van-icon name="volume-o" color="#FB6BFC" />
        <span class="title1">今日必抢</span>
        <span class="title2">折上再省不止5折</span>
      </div>
      <div class="mustrob-containe-list">
        <div
          class="mustrob-containe-list-part"
          v-for="item in discountSuper"
          :key="item.id"
        >
          <img :src="item.pic" alt="" />
          <h5>{{ item.dtitle }}</h5>
          <div class="mustrob-containe-list-price">
            ￥
            <span class="mustrob-containe-list-xianjia">{{ item.jiage }}</span>
            <span class="mustrob-containe-list-yuanjia"
              >￥{{ item.yuanjia }}</span
            >
          </div>
          <div class="mustrob-containe-list-juhuasuan">
            <span class="juhuasuan1">聚划算</span>
            <span class="juhuasuan2"
              >折上{{ (item.discount * 10).toFixed(1) }}折</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="mustrob-title">
      <img
        src="https://cmsstatic.ffquan.cn/dist/static/double-discount-choice@2x.d2d5b409.png"
        alt=""
      />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();

    const discountSuper = computed(() => {
      return store.state.discount.discountSuper;
    });

    const getDiscountSuper = () => {
      return store.dispatch({
        type: "discount/getDiscountSuper",
      });
    };

    onMounted(() => {
      getDiscountSuper();
    });

    return {
      discountSuper,
    };
  },
});
</script>

<style lang="stylus" scoped>
.mustrob
    margin-top .1rem
    width 100%
    font-size .14rem
    color #888
    padding-left  .07rem
    .mustrob-container
        .mustrob-containe-top
            margin-bottom .1rem
            .title1
                font-size .15rem
                font-weight 600
                color #333
                padding 0 0  0 .05rem
            .title2
                display inline-block
                font-size .1rem
                transform scale(.9)
        .mustrob-containe-list
            overflow auto
            display flex
            justify-content flex-start
            flex-wrap nowrap
            .mustrob-containe-list-part
                width 1.1rem
                padding  .1rem
                background #fff
                border-radius .08rem
                margin-right .05rem
                img
                    width 1rem
                    height 1rem
                    margin-top .05rem
                h5
                    margin .08rem 0 0
                    height .16rem
                    font-size .11rem
                    color #333
                    overflow hidden
                    white-space normal
                    text-overflow ellipsis
                    font-weight 400
                .mustrob-containe-list-price
                    margin-top .05rem
                    font-size .11rem
                    color #fe3738
                    height .17rem
                    display flex
                    align-items baseline
                    justify-content flex-start
                    .mustrob-containe-list-xianjia
                        font-size .15rem
                        line-height .17rem
                        font-weight 600
                        padding 0 .04rem 0 .02rem
                    .mustrob-containe-list-yuanjia
                        text-decoration line-through
                        color #a7a7a7
                        font-size .1rem
                        transform scale(.9)
                .mustrob-containe-list-juhuasuan
                    display flex
                    justify-content flex-end
                    height .21rem
                    position relative
                    margin-bottom .03rem
                    align-items center
                    font-size .1rem
                    text-align center
                    color #fff
                    .juhuasuan1
                        display inline-block
                        height .21rem
                        line-height .21rem
                        background linear-gradient(315deg,#ff80fd,#ff59fe 29%,#f600ff)
                        border-radius 0 .11rem 0 .08rem
                        font-size .1rem
                        font-weight 500
                        padding 0 .05rem
                        position: absolute
                        left 0
                        bottom: 0
                        transform scale(.9)
                        z-index 2
                    .juhuasuan2
                        margin-top .04rem
                        display inline-block
                        text-align left
                        font-size .1rem
                        font-weight 500
                        line-height .17rem
                        width .5rem
                        height .17rem
                        background linear-gradient(99deg,#9c00ff,#c110ff)
                        border-radius .09rem .09rem 0 .09rem
                        padding-left .36rem
                        transform scale(.9)
    .mustrob-title
        padding-top .09rem
        background #f6f6f6
        display flex
        align-items center
        justify-content center
        img
            width .88rem
            height .35rem
</style>
